<template>
  <el-select
    v-model="tagValues"
    multiple
    placeholder="Tag - 点击选择标签（可多选）"
    size="large"
    style="width: 100%"
    @change="tagChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>
<script setup>
import { ref } from 'vue'
const tagValues = ref([])
const options = [
  {
    value: 'fontend',// 值
    label: '前端',// 页面上显示的选项
  },
  {
    value: 'java',
    label: 'Java',
  },
  {
    value: 'vue',
    label: 'Vue',
  },
  {
    value: 'css',
    label: 'CSS',
  },
  {
    value: 'javascript',
    label: 'JavaScript',
  },
  {
    value: 'go',
    label: 'Go',
  },
  {
    value: 'python',
    label: 'Python',
  },
]
// 使用defineEmits注册一个自定义事件
const emit = defineEmits(["getTag"])
// 点击事件触发emit，去调用我们注册的自定义事件getValue,并传递value参数至父组件
const transValue = () => {
  emit("getTag", tagValues.value)
}
// tag值发生变化时执行事件
const tagChange = (value) => {
  transValue()
}
defineExpose({
  tagValues
})
</script>
<style lang="scss" scoped>

</style>